<template>
	<!-- 切换 -->
	<z-tabs ref="tabs" :list="list" :current="current" @change="tabsChange" inactive-color="#333" />
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="package_sale scroll-box"
		style="flex: 1; height: 1px;">
		<view class="package_sale space-between" v-for="(item) in orderLists"
			@click="navTo('gemstone/shopDetail?id='+item.id)" style="margin:0px;padding:15rpx 20rpx;" :key="item.id">
			<image :src="item.image" mode=""></image>
			<view style="width:67%;">
				<view class="title">{{item.name}}</view>
				<view class="inventory">库存:{{item.stock}}</view>
				<view class="space-between">
					<view style="font-size: 26rpx;color:#5097FB;">
						蓝宝石：<text style="font-size: 36rpx;">{{item.score}}</text>
					</view>
					<view class="center">
						<text style="border: 1px solid #1B91FF;" v-if="item.cart_gem_nums!=0" class="list2"
							@click.stop="carDeatil(item.id,1,'gem')">-</text>
						<text v-if="item.cart_gem_nums!=0" class="list1">{{item.cart_gem_nums}}</text>
						<text style="background: linear-gradient(-66deg, #4E96FB, #65A6FB);"
							@click.stop="carDeatil(item.id,2,'gem')" class="list">+</text>
					</view>
				</view>
				<view class="space-between" style="margin-top:10rpx;">
					<view style="font-size: 26rpx;color: #FE412C;">
						钱包价格：<text style="font-size: 24rpx;">￥</text><text
							style="font-size: 36rpx;">{{item.price}}</text>
					</view>
					<view class="center">
						<text v-if="item.cart_money_nums!=0" @click.stop="carDeatil(item.id,1,'money')"
							class="list2">-</text>
						<text v-if="item.cart_money_nums!=0" class="list1">{{item.cart_money_nums}}</text>
						<text @click.stop="carDeatil(item.id,2,'money')" class="list">+</text>
					</view>
				</view>
			</view>
		</view>
		<Popu v-if="orderLists.length<1" :pageHeight="pageHeight" :text="'暂无商品'"></Popu>
	</scroll-view>
</template>

<script setup lang="ts">
	import { navTo } from '@/utils/navigator';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { showLoading } from '@/utils/prompt';
	import { ref } from 'vue';
	import { toPublish } from '@mqtt';
	import { onShow } from '@dcloudio/uni-app';
	import { getGoodsType, getGoodsListByScore } from '@/gql/gemstone';
	import { getDriverID } from '@/stores/driverID';
	const driver_id = getDriverID();
	const emit = defineEmits(['carDeatil']);
	const current = ref(0)
	const tabs = ref(null)
	const list = ref([])
	const pageHeight = ref();
	const orderLists = ref([]);
	const isLoading = ref(false);
	const lastPage = ref(1);
	const currentPage = ref(1);
	const goodsID = ref()
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = (res.windowHeight - 220);
		},
	});
	onShow(() => {
		init()
		current.value = 0;
		orderLists.value = []
		currentPage.value = 1
	})
	function init() {
		showLoading()
		const payload = {
			query: getGoodsType,
		};
		toPublish(
			'ql/score/getGoodsType',
			payload,
			(obj : any) => {
				const { getGoodsType } = obj.data;
				list.value = getGoodsType
				goodsID.value = getGoodsType.length > 0 ? getGoodsType[0].id : 0
				fillorder()
			}
		);
	}
	function fillorder() {
		showLoading()
		isLoading.value = true;
		const payload = {
			query: getGoodsListByScore,
			variables: {
				page: currentPage.value,
				goods_type: goodsID.value,
				driver_id
			},
		};
		toPublish(
			'ql/score/getGoodsListByScore',
			payload,
			(obj : any) => {
				const { getGoodsListByScore } = obj.data;
				isLoading.value = false;
				orderLists.value = [...orderLists.value, ...getGoodsListByScore.list];
				lastPage.value = getGoodsListByScore.lastpage;
			},
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			fillorder();
		}
	}
	//tabs通知swiper切换
	function tabsChange(index : number) {
		current.value = index;
		goodsID.value = list.value[index].id
		orderLists.value = []
		currentPage.value = 1
		fillorder();
	}
	function change() {
		orderLists.value = []
		currentPage.value = 1
		fillorder();
	}
	function carDeatil(id : number, num : number, type : string) {
		emit('carDeatil', id, num, type)
	}
	defineExpose({ change, orderLists });
</script>

<style scoped lang="less">
	.scroll-box {
		width: 100%;
		margin-top: 10rpx;
		background-color: white;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
	}

	image {
		width: 210rpx;
		height: 210rpx;
		border-radius: 5px;
	}

	.title {
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.inventory {
		font-size: 26rpx;
		color: #666;
		margin: 10rpx 0px;
	}

	.list2 {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 48rpx;
		box-sizing: border-box;
		border: 1px solid #FF5700;
	}

	.list1 {
		width: 50rpx;
		text-align: center;
	}

	.list {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 48rpx;
		box-sizing: border-box;
		background: linear-gradient(-66deg, #FF5700, #FE0000);
		color: #fff;
	}
</style>